import React, { Component } from "react";
import PropTypes from "prop-types"
import { List } from "antd-mobile"
const Item = List.Item

// 设备信息主页Item
class AlbumItem extends Component {
    constructor(props, context) {
        super(props, context);
        this.handleItemClick = this.handleItemClick.bind(this)
    }

    handleItemClick() {
        this.props.albumItemClick(this.props.album)
    }
    render() {
        return (
            <Item
                arrow="horizontal"
                onClick={this.handleItemClick}>
                <div style={styles.div_1}>
                    <div style={styles.div_2}>
                        <img src={this.props.album.img_url} style={styles.img} alt="" />
                    </div>
                    <div style={{ marginLeft: 10}}>
                        <p style={styles.name}>{this.props.album.name}</p>
                        <div style={styles.count}>{this.props.album.count + "首"}</div>
                    </div>
                </div>
            </Item>
        );
    }
}

AlbumItem.propTypes = {
    album: PropTypes.object.isRequired,
}
export default AlbumItem;

// 比例系数,防止部分手机由于文字过长,导致视图左右晃动
const quotiety = document.documentElement.clientWidth * 0.6;
const styles = {
    div_1: { width: "100%", height: "42px", display: "flex" },
    div_2: { alignItems: "center", justifyContent: "center", display: "flex",height: "42px" },
    img: { width: "36px", height: "36px", borderRadius: "3px" },
    name: {
        width: quotiety,
        marginRight: 16,
        paddingBottom:0,
        marginBottom:3,
        color: "#000",
        fontSize: "14px",
        marginTop: 1,
        overflow: "hidden",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap",
    },
    count: {
        width: "80px",
        color: "#888",
        fontSize: "12px",
        display: "flex",
    },

}